<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游首页</title>
    <link rel="stylesheet" href="less/travel.css">
    <script src="js/flexible.js"></script>
</head>

<body>
    <header>
        <div class="travel-header">
            <div class="travel-header-return"></div>
            <div class="travel-header-input">
                <div class="input-local">
                    <img src="images/icon/location.png">
                    <span class="location">北京</span>
                </div>
                <div class="input-search">
                    <img src="images/icon/galss_03.png">
                    <span>目的地/关键词</span>
                </div>
            </div>
        </div>
        <!-- swiper -->
        <div class="travel-swiper-container skeleton">
            <div class="swiper-wrapper ">
                <a href="travelDatail.html?id=100002021"  class="swiper-slide"><img src="images/img/travel-banner01.jpg"></a>
                <a href="travelDatail.html?id=100002022"  class="swiper-slide"><img src="images/img/travel-banner02.jpg"></a>
                <a href="travelDatail.html?id=100002023"  class="swiper-slide"><img src="images/img/travel-banner03.jpg"></a>
                <a href="travelDatail.html?id=100002024"  class="swiper-slide"><img src="images/img/travel-banner04.jpg"></a>
            </div>
            <!-- Add Pagination -->
            <div class="travel-swiper-pagination"></div>
        </div>
        <!-- Swiper JS -->
        <script src="js/swiper.min.js"></script>
        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.travel-swiper-container', {
                spaceBetween: 30,
                loop: true,
                centeredSlides: true,
                paginationClickable: true,
                autoplay: {
                    delay: 2200,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.travel-swiper-pagination',
                    clickable: true,
                },
            });
        </script>
    </header>

    <section>
        <aside class="travel-sec-head">
            <ul>
                <li class="skeleton">
                    <a href="travelList.html">
                        <img src="images/icon/outtrip.png">
                        <p>出境游</p>
                    </a>
                </li>
                <li class="skeleton">
                    <a href="travelList.html">
                        <img src="images/icon/guoneitrip.png">
                        <p>国内游</p>
                    </a>
                </li>
                <li class="skeleton">
                    <a href="travelList.html">
                        <img src="images/icon/zhoubiantrip.png">
                        <p>周边游</p>
                    </a>
                </li>
                <li class="skeleton">
                    <a href="travelList.html">
                        <img src="images/icon/dangditrip.png">
                        <p>当地游</p>
                    </a>
                </li>
            </ul>
            <div class="travel-sec-main skeleton">
                <!-- <div class="travel-show" style="width:60%">
                    <img src="images/img/travel-show_01.jpg">
                    <div class="lijian"></div>
                </div> -->
            </div>
        </aside>
        <article>
            <div class="travel-sec-bottom">
                <p class="skeleton">
                    <img src="images/icon/Plane.png">
                    <img src="images/icon/chujingtrip.png">
                    <img src="images/img/travel-look0401_01.png">
                </p>
                <ul class="travel-ullist">
                </ul>
            </div>
        </article>
    </section>

    <footer>
        <ul>
            <li>
                <a href="index.html" class="index">
                    <span class="img-index"></span>
                    <p>旅游首页</p>
                </a>
            </li>
            <li>
                <a href="search.html" class="search">
                    <span class="img-search"></span>
                    <p>目的地</p>
                </a>
            </li>
            <li>
                <a href="history.html" class="history">
                    <span class="img-history-active"></span>
                    <p>浏览历史</p>
                </a>
            </li>
            <li>
                <a href="myinfo.html" class="myinfo">
                    <span class="img-myinfo"></span>
                    <p>个人</p>
                </a>
            </li>
        </ul>
    </footer>
    <script src='js/jquery-1.12.4.min.js'></script>
    <script src='js/travel.js'></script>
</body>

</html>